<template>
	<view class="box">
		<u--form labelPosition="left" ref="form" labelWidth="270rpx" :model="form" :rules="rules">
			<!-- 上 -->
			<view class="topBox">
				<u-form-item label="作业计划名称" prop="workPlanName">
					<!-- @blur="workPlanNameChange" -->
					<u--input border="none" v-model="form.workPlanName" placeholder="请输入作业计划名称"
						placeholderStyle="text-align=right">
					</u--input>
				</u-form-item>

				<view class="content-item">
					<view class="content-item-left">
						申请时间
					</view>
					<view class="content-item-right color">
						{{form.insertTime}}
					</view>
				</view>
			</view>

			<!-- 下 -->
			<view class="bottomBox">
				<u-form-item label="作业风险等级" prop="riskLevelName" @click="levelClick">
					<u--input border="none" v-model="form.riskLevelName" placeholder="请选择作业风险等级"
						@blur="workPlanNameChange" placeholderStyle="text-align=right" suffixIcon="arrow-right"
						:disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>

				<view class="content-item" @click="projectClick">
					<view class="content-item-left">
						工程项目名称
					</view>
					<view class="content-item-right">
						{{form.projectName}}
						<u-icon name="arrow-right" color="#000000" size="36rpx" style="margin-left: 10rpx;"></u-icon>
					</view>
				</view>

				<view class="content-item">
					<view class="content-item-left">
						报送单位
					</view>
					<view class="content-item-right color">
						{{form.belongUnitName}}
					</view>
				</view>

				<view class="content-item">
					<view class="content-item-left">
						创建部门
					</view>
					<view class="content-item-right color">
						{{form.belongDepName}}
					</view>
				</view>

				<view class="content-item" @click="workClick">
					<view class="content-item-left">
						作业单位
					</view>
					<view class="content-item-right">
						{{form.workUnit}}
						<u-icon name="arrow-right" color="#000000" size="36rpx" style="margin-left: 10rpx;"></u-icon>
					</view>
				</view>

				<u-form-item label="作业人员数量" prop="workPeopleNum">
					<u--input placeholder="请输入作业人员数量" border="none" v-model="form.workPeopleNum">
					</u--input>
				</u-form-item>

				<u-form-item label="作业计划开始时间" prop="beginTime" @click="timeClick('1')">
					<u--input placeholder="请选择计划开始时间" border="none" v-model="form.beginTime" suffixIcon="arrow-right"
						:disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>

				<u-form-item label="作业计划结束时间" prop="endTime" @click="timeClick('2')">
					<u--input placeholder="请选择计划结束时间" border="none" v-model="form.endTime" suffixIcon="arrow-right"
						:disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>


				<u-form-item label="工作负责人" @click="peopleClick('1')">
					<u--input placeholder="请选择工作负责人(选择一位)" border="none" v-model="form.workManage"
						suffixIcon="arrow-right" :disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>

				<u-form-item label="监理人" @click="peopleClick('2')">
					<u--input placeholder="请选择监理人(可选多位)" border="none" v-model="form.supervisor"
						suffixIcon="arrow-right" :disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>

				<u-form-item label="督查人员" @click="peopleClick('3')">
					<u--input placeholder="请选择督查人员(可选多位)" border="none" v-model="form.supManagePerson"
						suffixIcon="arrow-right" :disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>

				<u-form-item label="到岗到位人员" @click="peopleClick('4')">
					<u--input placeholder="请选择到岗到位人员(可选多位)" border="none" v-model="form.dgr" suffixIcon="arrow-right"
						:disabled="true" disabledColor="#fff">
					</u--input>
				</u-form-item>

				<u-form-item label="作业地点" prop="workPlace">
					<u--input placeholder="请输入作业地点" border="none" v-model="form.workPlace">
					</u--input>
				</u-form-item>

				<u-form-item label="作业内容" prop="workContent">
					<u--input placeholder="请输入作业内容" border="none" v-model="form.workContent">
					</u--input>
				</u-form-item>

				<u-form-item label="危险识别" prop="riskIdentification">
					<u--input placeholder="请输入危险识别" border="none" v-model="form.riskIdentification">
					</u--input>
				</u-form-item>

				<view>
					<view style="margin-top: 30rpx;width: 100%;">
						控制措施
					</view>
					<view style="margin-top: 20rpx;">
						<u--textarea class="textarea" maxlength="1000" v-model="form.controlMeasures" border="none" placeholder="请输入控制措施"
							autoHeight>
						</u--textarea>
					</view>

				</view>
			</view>
		</u--form>
		<view class="btn-view">
			<view class="cancelBtn" @click="cancel">取消</view>
			<view class="sureBtn" @click="save">保存</view>
		</view>

		<!-- 时间控件 -->
		<u-datetime-picker v-model="value1" @confirm="timeSure" @cancel="show = false" :show="show">
		</u-datetime-picker>

		<!-- 选择器控件 -->
		<u-picker :show="selectShow" :columns="columns" keyName="label" @confirm="selectSure"
			@cancel="selectShow=false">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:Number(new Date()),
				// 时间控制展示
				show: false,
				// 时间类型
				timeType: '',
				// 下拉框展示
				selectShow: false,
				// 下拉框数据
				columns: [
					[]
				],
				// 等级类型数据
				form: {
					id: '',
					workPlanName: '',
					insertTime: '',
					riskLevelName: '',
					projectName: '',
					belongUnitName: '',
					belongDepName: '',
					workUnit: '',
					workPeopleNum: '',
					beginTime: '',
					endTime: '',
					workManage: '',
					supervisor: '',
					supManagePerson: '',
					dgr: '',
					workPlace: '',
					workContent: '',
					riskIdentification: '',
					controlMeasures: ''
				},
				rules: {
					workPlanName: {
						type: 'string',
						required: true,
						message: '请输入作业计划名称',
						trigger: ['blur', 'change']
					},
					riskLevelName: {
						type: 'string',
						required: true,
						message: '请选择作业风险等级',
						trigger: ['blur', 'change']
					},
					workUnit: {
						type: 'string',
						required: true,
						message: '请填写作业单位',
						trigger: ['blur', 'change']
					},
					beginTime: {
						type: 'string',
						required: true,
						message: '请选择计划开始时间',
						trigger: ['blur', 'change']
					},
					endTime: {
						type: 'string',
						required: true,
						message: '请选择计划结束时间',
						trigger: ['blur', 'change']
					},
					workPeopleNum: {
						type: 'number',
						required: true,
						message: '请填写作业人员数量',
						trigger: ['blur', 'change']
					},
					// workManage: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择工作负责人',
					// 	trigger: ['blur', 'change']
					// },
					// supervisor: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择监理人',
					// 	trigger:  ['blur', 'change']
					// },
					// supManagePerson: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择督查人员',
					// 	trigger: ['blur', 'change']
					// },
					// dgr: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择到岗到位人员',
					// 	trigger: ['blur', 'change']
					// },
					workPlace: {
						type: 'string',
						required: true,
						message: '请输入作业地点',
						trigger: ['blur', 'change']
					},
					workContent: {
						type: 'string',
						required: true,
						message: '请输入作业内容',
						trigger: ['blur', 'change']
					},
					riskIdentification: {
						type: 'string',
						required: true,
						message: '请输入危险识别',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		// 上个页面编辑传来的值
		onLoad(options) {
			this.id = options.id
			// 获取详情
			this.getAppWorkPlanDetailInfo()

			// 更新选中的项目名称
			uni.$on('projectUpdate', (project) => {
				this.form.projectName = project.projectName
			})

			// 更新选中的作业单位
			uni.$on('workUpdate', (project) => {
				this.form.workUnit = project.orgName
			})

			// 更新选中工作负责人
			uni.$on('oneRadio', (projectObj) => {
				this.form.workManage = projectObj.userName
			})

			//更新选中的监理人
			uni.$on('towRadio', (projectArr) => {
				let str = ''
				projectArr.forEach((item) => {
					str += item.userName + ','
				})
				this.form.supervisor = str.substr(0, str.length - 1)
			})

			// 更新选中的督查人员
			uni.$on('threeRadio', (projectArr) => {
				let str = ''
				projectArr.forEach((item) => {
					str += item.userName
				})
				this.form.supManagePerson = str.substr(0, str.length - 1)
			})

			// 更新选中到岗人员 
			uni.$on('fourRadio', (projectArr) => {
				let str = ''
				projectArr.forEach((item) => {
					str += item.userName
				})
				this.form.dgr = str.substr(0, str.length - 1)
			})
		},
		methods: {
			// 获取详情信息
			getAppWorkPlanDetailInfo() {
				let that = this
				let params = {
					workPlanId: that.id
				}
				that.request(that.$api.getAppWorkPlanDetailInfo, params, 'POST').then((res) => {
					if (res) {
						// 表单信息
						this.form = res.resultValue.items[0]
						// 等级
						res.resultValue.dicts[1].values.forEach((item) => {
							this.columns[0].push({
								id: item.value,
								label: item.text
							})
						})
					}
				})
			},
			// 作业计划名称改变
			workPlanNameChange() {
				let that = this
				let params = {
					workPlanName: that.form.workPlanName
				}
				that.request(that.$api.getAppRiskAndControl, params, 'POST').then((res) => {
					if (res) {
						this.form.riskIdentification = res.resultValue.riskIdentification
						this.form.controlMeasures = res.resultValue.controlMeasures
						this.form.riskLevel = res.resultValue.riskLevel
						console.log(this.columns[0])
						this.columns[0].forEach((item)=>{
							if(item.id == this.form.riskLevel){
								console.log(item)
								this.form.riskLevelName = item.label
							}
						})
					}
				})
			},
			// 风险等级
			levelClick(e) {
				this.selectShow = true
			},
			// 项目名称
			projectClick() {
				uni.navigateTo({
					url: '../changeProject/changeProject'
				})
			},
			// 作业单位
			workClick() {
				uni.navigateTo({
					url: '../changeWork/changeWork'
				})
			},
			// 选择人员点击跳转选择人员
			peopleClick(val) {
				// 负责人 单选
				let selfFlag = ''
				if(uni.getStorageSync('userInfo').unitLevel!==1){
					selfFlag = 1
				}
				if (val == 1) {
					uni.navigateTo({
						url: '../selectChangePeople/selectChangePeople?flag=' + val +'&selfFlag=' + selfFlag
					})
					// 监理人多选
				} else if (val == 2) {
					uni.navigateTo({
						url: '../selectChangePeople/selectChangePeople?flag=' + val +'&selfFlag=' + selfFlag
					})
					// 督查人多选
				} else if (val == 3) {
					uni.navigateTo({
						url: '../selectChangePeople/selectChangePeople?flag=' + val +'&selfFlag=' + selfFlag
					})
					// 到岗人多选
				} else {
					uni.navigateTo({
						url: '../selectChangePeople/selectChangePeople?flag=' + val +'&selfFlag=' + selfFlag
					})
				}
			},
			// 时间点击打开时间弹框
			timeClick(val) {
				this.timeType = val
				this.show = true
				console.log(this.show)
				// this.show = false
			},
			// 时间弹框确认
			timeSure(e) {
				console.log(e)
				if (this.timeType == '1' && e.value !=='') {
					this.form.beginTime = this.formatDate(e.value)
				} else if(this.timeType == '2' && e.value !=='') {
					this.form.endTime = this.formatDate(e.value)
				}
				this.show = false
			},
			// 选择器确认
			selectSure(e) {
				console.log(e)
				this.form.riskLevelName = e.value[0].label
				this.form.riskLevel = e.value[0].id
				this.selectShow = false
			},
			// 取消按钮
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 保存按钮
			save() {
				this.$refs.form.validate().then(res => {
					let that = this
					let params = this.form
					that.request(that.$api.save, params, 'POST').then((res) => {
						if (res) {
							uni.$u.toast('保存成功!')
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		background: #F1F2F5;
		box-sizing: border-box;
		padding: 20rpx 0;
		position: relative;
	}

	.topBox {
		padding: 0 40rpx 0 40rpx;
		background: white;
	}

	.bottomBox {
		margin-top: 20rpx;
		padding: 0 20rpx 800rpx 40rpx;
		background: white;
	}

	.content-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
	}

	.content-item-left {
		width: 270rpx;
		font-size: 32rpx;
		color: #333333;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.content-item-right {
		width: calc(100% - 270rpx);
		display: flex;
		justify-content: flex-end;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		color: #65717D;
	}

	.textStyle {
		width: calc(100% - 32rpx);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
		color: #65717D;
	}

	.btn-view {
		position: fixed;
		z-index: 66;
		bottom: 0;
		padding: 60rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		background-color: #f4f6fa;
	}

	.cancelBtn {
		width: 50%;
		height: 80rpx;
		border: 2rpx solid #3473F9;
		color: #3473F9;
		box-sizing: border-box;
		text-align: center;
		line-height: 80rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}

	.sureBtn {
		width: 50%;
		height: 80rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin-left: 20rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}

	.color {
		color: #BEBEBE;
	}

	>>>.u-form-item__body__left__content__label {
		font-size: 32rpx;
		color: #414A53;
	}

	>>>.uni-input-input {
		text-align: right;
		font-size: 32rpx;
		color: #65717D;

	}

	>>>.u-input__content {
		width: calc(100% - 270rpx);
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
	}

	>>>.u-form-item {
		border-bottom: 2rpx solid #F2F2F2;
	}

	>>>.u-form-item:last-child {
		border-bottom: none;
	}

	>>>.u-form-item__body__right__message {
		text-align: right;
		margin-bottom: 10rpx;
	}

	>>>.u-textarea {
		padding: 20rpx 0 0 0;
	}

	/* >>>.uni-textarea-compute {
		height: 900rpx;
	} */

	>>>.uni-input-placeholder {
		text-align: right;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		box-sizing: border-box;
		border: none !important;
		padding-left: 0;
	}

	>>>.u-textarea__field {
		width: 100%;
		height: 100%;
	}
</style>
